{% extends "personal_center/base.html" %}

{% block page_link %}
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div id="new_issues" style="width: 100%;height: 100%;overflow: auto;">
        <div style="width: 100%;height: 40px;font-size: 0;text-align: left;padding-left: 15px;border-bottom: #cfcfcf solid 1px;background-color: white;">
            <button style="width: 100px;border-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 5px;height: 30px;margin-right: 15px;outline: none;cursor: pointer;margin-left: -1px;" onclick="date_search('week')">近一周</button>
            <button style="width: 100px;border-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 5px;height: 30px;margin-right: 15px;outline: none;cursor: pointer;margin-left: -1px;" onclick="date_search('LastMonth')">近一月</button>
            <button style="width: 100px;border-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 5px;height: 30px;margin-right: 15px;outline: none;cursor: pointer;margin-left: -1px;" onclick="date_search('LastThreeMonths')">近三月</button>
            <button style="width: 100px;border-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 5px;height: 30px;margin-right: 15px;outline: none;cursor: pointer;margin-left: -1px;" onclick="date_search('NearlyHalfYear')">近半年</button>

            <span style="float: right;margin-right: 15px;line-height: 40px;">
                <a href="print_report.html" style="font-size: 14px;"><i class="iconfont icon-gengduo1" style="color: #00a0e9;"></i> 详情</a>
            </span>
        </div>

        <div id="my_application" style="width: 100%;height: 94.5%;overflow: auto;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;">
                    <div style="width: 98%;height: 47%;margin-top: 1%;background: white;margin-left: 1%;">
                        <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 15px;text-align: left;background: #BFEFFF;">
                            用印月份统计
                        </div>
                        <div id="StatisticsPrintingMonth" style="width: 100%;height: 90%;"></div>
                    </div>

                    <div style="width: 98%;height: 47%;margin-top: 1%;background: white;margin-left: 1%;">
                        <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 15px;text-align: left;background: #BFEFFF;">
                            用印部门统计
                        </div>
                        <div id="StatisticsPrintingDepartment" style="width: 100%;height: 90%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("print_report").className = "add-nav-active";
            document.getElementById("SystemReport").style.display='block';
            document.getElementById("ReportIco").className = "iconfont icon-jiantou-xia";
            NumberOfIssues();
            bm_echart();
        };

        // 议题数统计图
        function NumberOfIssues() {
            var chartDom = document.getElementById('StatisticsPrintingMonth');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ yf_list | safe }}
                },
                yAxis: {
                    type: 'value'
                },
                grid:{ // 让图表占满容器
                  top:"20px",
                  left:"80px",
                  right:"80px",
                  bottom:"35px"
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }

                    },
                },
                series: [
                    {
                        data: {{ data_list | safe }},
                        type: 'line',
                        areaStyle: {}
                    }

                ]
            };
            option && myChart.setOption(option);
        }

        // 部门申请统计图
        function bm_echart() {
            var chartDom = document.getElementById('StatisticsPrintingDepartment');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: {{ dep_list | safe }},
                    axisLabel: {
                        rotate: 40
                    }
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }

                    },
                },
                grid:{ // 让图表占满容器
                    left:"80px",
                    right:"80px",
                    bottom:"100px"
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                series: [
                    {
                        data: {{ dep_number_list | safe }},
                        type: 'bar'
                    }

                ]
            };
            option && myChart.setOption(option);
        }

        function date_search(search_date) {
            window.location.href='print_report_echart.html?days='+search_date
        }
    </script>
{% endblock %}
